<template>
  <div class="echarts-bar-index" ref="chartsBar"></div>
</template>

<script setup>
import * as echarts from 'echarts'
import { curTheme } from './theme'

const props = defineProps({
  /**
   * listKey 中的属性 和 value 的形式
   */
  list: {
    type: Array,
    default: [],
  },
  // list 列表中的 key 值
  listKey: {
    type: String,
    default: 'label',
  },
  // 是否开启 X轴 的旋转
  isRotate: {
    type: Boolean,
    default: false,
  },
  // 是否为多个柱图
  isMulti: {
    type: Boolean,
    default: false,
  },
  // 多个柱图时配置每个柱图的 name
  multiOptions: {
    type: Array,
    default: [],
  },
  color: {
    type: Array,
    default: [],
  },
  // 是否显示 label，默认为 ''，则不显示。其余的则表示显示的位置：'top' | 'bottom'，等等
  labelShow: {
    type: String,
    default: '',
  }
})

const chartsBar = ref(null)
const myChart = ref(null)

const options = {
  tooltip: {
    confine: true,
    backgroundColor: curTheme.tooltipBg,
    borderColor: curTheme.tooltipBg,
    textStyle: {
      color: curTheme.color,
    },
  },
  grid: {
    left: '1%',
    right: '1%',
    top: '10%',
    bottom: props.isRotate ? '0%' : '3%',
    containLabel: true,
  },
  xAxis: {
    type: 'category',
    data: [],
    offset: 10,
    axisTick: {
      show: false,
    },
    axisLabel: {
      show: true,
      rotate: props.isRotate ? 45 : 0,
      fontSize: '14px',
      color: curTheme.color,
    },
    axisLine: {
      show: true,
      lineStyle: {
        type: 'solid',
        color: curTheme.xAxisColor,
      },
    },
  },
  yAxis: {
    type: 'value',
    minInterval: 1,
    axisLabel: {
      fontSize: '14px',
      color: curTheme.color,
    },
    splitLine: {
      lineStyle: {
        color: curTheme.ySplitLineColor,
        type: 'dashed',
      },
    },
  },
  series: [
    {
      data: [],
      type: 'bar',
      barMaxWidth: 20,
      showBackground: true,
      backgroundStyle: {
        color: 'rgba(36, 97, 177, 0.1)',
      },
      itemStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          { offset: 0, color: '#73B7FF' },
          { offset: 1, color: '#3F81FE' },
        ]),
        // borderColor: 'rgba(36, 97, 177, 0.1)',
        // borderWidth: 10,
        borderRadius: 4,
      },
    },
  ],
}

onMounted(() => {
  // echarts 实例对象不能转为代理对象会影响一些属性
  myChart.value = markRaw(echarts.init(chartsBar.value))

  window.addEventListener('resize', function () {
    myChart.value.resize()
  })
})

onUnmounted(() => {
  window.removeEventListener('resize', function () {
    myChart.value.resize()
  })
})

watch(
  () => props.list,
  newVal => {
    options.xAxis.data = newVal.map(item => item[props.listKey])
    if (props.isMulti) {
      if (props.multiOptions.length <= 0) {
        throw new Error('multiOptions 不能为空')
      }
      const defaultSeries = { ...options.series[0] }
      options.series = props.multiOptions.map((item, index) => {
        return {
          ...defaultSeries,
          name: item,
          data: newVal.map(cur => {
            return cur.results[index]
          }),
          itemStyle: {
            ...defaultSeries.itemStyle,
            color: props.color[index],
          },
          label: {
            show: true,
            color: props.color[index],
          }
        }
      })
      options.legend = {
        data: props.multiOptions,
      }
      options.tooltip = {
        ...options.tooltip,
        trigger: 'axis',
        axisPointer: {
          type: 'none',
        },
      }
    } else {
      options.series[0].data = newVal.map(item => item.value)
    }

    if(props.labelShow) {
      options.label = {
        show: true,
        position: props.labelShow
      }
    }

    nextTick(() => {
      myChart.value?.clear()
      if (newVal.length > 0) {
        myChart.value?.setOption(options)
      } else {
        myChart.value?.setOption(curTheme.notDataOption)
      }
    })
  },
  {
    deep: true,
    immediate: true,
  }
)
</script>

<style lang="scss" scoped>
.echarts-bar-index {
  width: 100%;
  height: 100%;
}
</style>
